<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="中国潮牌" fixed>
      <div slot="right">
        <router-link to="/register" class="link">注册</router-link>
        <router-link to="/login" class="link">登录</router-link>
      </div>
    </mt-header>

    <mt-search v-model="value" cancel-text="取消" placeholder="搜索" style="height:8vh;padding-top:40px;">
    </mt-search>
    <div>
      <mt-cell title="热销推荐" style="height:2vh;"></mt-cell>
      <!-- 轮播图 -->
      <mt-tab-container-item>
        <mt-swipe
          style="height: 56.2vw"
          :speed="500"
          :auto="3000"
          :showIndicators="false"
        >
          <mt-swipe-item><img src="/images/1.jpg" alt="" /></mt-swipe-item>
          <mt-swipe-item><img src="/images/2.jpg" alt="" /></mt-swipe-item>
          <mt-swipe-item><img src="/images/3.jpg" alt="" /></mt-swipe-item>
        </mt-swipe>
      </mt-tab-container-item>
    </div>
    <mt-button type="primary" size="large" >李宁</mt-button>
    <mt-button type="primary"  >安踏</mt-button>
    <mt-button type="primary"  >美特斯邦威</mt-button>
    <mt-button type="primary"  >特步</mt-button>
    <mt-button type="primary"  >匹克</mt-button>
    <mt-button type="primary"  >鸿星尔克</mt-button>
    <mt-button type="primary"  >回力</mt-button>
    <mt-button type="primary"  >唐狮</mt-button>
    <mt-button type="primary"  >以纯</mt-button>
    <mt-button type="primary"  >贵人鸟</mt-button>
    <mt-button type="primary"  >森马</mt-button>
    <mt-button type="primary"  >361</mt-button>
  </div>
</template>

<script>
import ArticleItem from "../components/article_item.vue";

export default {
  data() {
    return {
      value:'',
    };
  },
};
</script>


<style lang="css">
.link {
  color: #fff;
  padding: 0 5px;
}
img {
  width: 100%;
  padding-top: 3px;
}
</style>